<template>
  <div class="app-container">
    <el-form :inline="true" :model="relationParameter" class="demo-form-inline">
      <el-form-item label="用户姓名">
        <el-input v-model="relationParameter.name" size="small" style="width: 150px" clearable placeholder="用户名姓名" />
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="relationParameter.phone" size="small" style="width: 150px" clearable placeholder="联系电话" />
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="relationParameter.idCard" size="small" clearable placeholder="身份证号" />
      </el-form-item>
      <el-form-item label="人员来源">
        <el-select v-model="relationParameter.source" size="small" placeholder="人员来源" clearable>
          <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button size="small" type="primary" @click="handleAddUpd(1)">
          <i class="el-icon-upload el-icon-plus" />
          新增用户
        </el-button>
      </el-form-item>

      <el-form-item>
        <el-button size="small" @click="handleSearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-upload
          class="upload-demo"
          action="http://192.168.1.6:9011/relation/uploadExcel"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :headers="object"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :on-success="handleSuccess"
          :show-file-list="false"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <span slot="tip" class="el-upload__tip">(只能上传xlsx文件)</span>
        </el-upload>
      </el-form-item>
      <!--      <el-form-item>-->
      <!--        <el-button size="small" type="danger" @click="del">删除所选</el-button>-->
      <!--      </el-form-item>-->

    </el-form>
    <el-table
      id="out-table"
      class="el-table"
      border
      :data="relationList.list"
      style="width: 98%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        align="center"
        prop="name"
        label="姓名"
        width="100"
      />
      <el-table-column
        align="center"
        prop="sex"
        label="性别"
        width="80"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.sex===0">未知</el-tag>
          <el-tag v-if="scope.row.sex===1"> 男</el-tag>
          <el-tag v-if="scope.row.sex===2"> 女</el-tag>

        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="age"
        label="年龄"
        width="100"
      />
      <el-table-column
        align="center"
        prop="phone"
        label="联系电话"
        width="120"
      />
      <el-table-column
        align="center"
        prop="idCard"
        width="180"
        label="身份证号"
      />
      <el-table-column
        align="center"
        prop="useNumber"
        label="使用次数"
        width="100"
      />
      <el-table-column
        align="center"
        prop="freeNumber"
        label="剩余次数"
        width="100"
      />
      <el-table-column
        align="center"
        prop="source"
        label="用户来源"
        width="200"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.source===1">移动用户</el-tag>
          <el-tag v-if="scope.row.source===2">残联代付</el-tag>
          <el-tag v-if="scope.row.source===3"> 卫健委 </el-tag>
          <el-tag v-if="scope.row.source===5">自费用户</el-tag>

        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="status"
        label="用户状态"
        width="150"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status===0">正常</el-tag>
          <el-tag v-if="scope.row.status===1">过世</el-tag>

        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="createTime"
        label="注册时间"
        width="180"
      />
      <el-table-column
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            plain
            type="primary"
            size="mini"
            @click="handleOrder(scope.row.id)"
          >发起订单
          </el-button>
          <el-button
            plain
            size="mini"
            @click="handleAddUpd(2,scope.row.id)"
          >编辑
          </el-button>
          <el-popconfirm
            class="ml-1"
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确定删此成员信息吗？"
            @onConfirm="del(scope.row.id)"
          >
            <!--            <el-button-->
            <!--              slot="reference"-->
            <!--              type="danger"-->
            <!--              size="mini"-->
            <!--            >删除-->
            <!--            </el-button>-->
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--    添加/修改人员弹窗-->

    <el-dialog :title="popType===1?'添加人员信息':'修改人员信息'" width="30%" top="12%" :visible.sync="dialogFormVisible">
      <el-form :model="relation">
        <div class="box">
          <el-form-item label="用户姓名" :label-width="formLabelWidth">
            <el-input v-model="relation.name" style="width: 130px" autocomplete="off" />
          </el-form-item>
          <el-form-item label="用户来源" :label-width="formLabelWidth">

            <el-select v-model="relation.source" style="width: 160px" placeholder="请选择用户来源">
              <el-option label="残联" :value="2" />
              <el-option label="卫健委" :value="3" />
              <el-option label="自费用户" :value="5" />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="身份证号" :label-width="formLabelWidth">
          <el-input v-model="relation.idCard" :disabled="popType===2" style="width: 300px" autocomplete="off" />
        </el-form-item>
        <div class="box">
          <el-form-item label="联系电话" :label-width="formLabelWidth">
            <el-input v-model="relation.phone" style="width: 180px" autocomplete="off" />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="popType===1" type="primary" @click="saveRelation()">确 定</el-button>
        <el-button v-else type="primary" @click="updateRelation()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 发起订单弹窗-->

    <el-dialog class="" title="发起订单" width="50%" top="8vh" :visible.sync="dialogFormVisible2" lock-scroll>
      <div class="schedule-form ">
        <div style="font-size: 15px;font-weight: 600">用户信息</div>
        <el-table :data="relationListPop" border>

          <el-table-column align="center" property="name" label="姓名" width="150" />
          <el-table-column align="center" property="age" label="年龄" width="150" />
          <el-table-column align="center" property="phone" label="电话" width="200" />
          <el-table-column align="center" property="idCard" label="身份证号码" />
        </el-table>
        <div v-if="relationInfo.freeNumber=0" style="color: #ff0000">*用户免费次数已用完，继续下单将会产生费用</div>
        <div class="orderInfo">选择下单信息</div>
        <el-form :model="relation">
          <div class="box">
            <el-form-item label="服务类型" :label-width="formLabelWidth2">
              <el-select v-model="orderParameter.type" filterable style="width: 160px" placeholder="请选择" @change="serverChange">
                <el-option label="门诊" value="1" />
                <el-option label="血透" value="2" />
                <el-option label="配药" value="3" />
              </el-select>
            </el-form-item>
            <transition name="el-zoom-in-top">
              <el-form-item
                v-if="orderParameter.type==='1' || orderParameter.type==='2' "
                label="医院列表"
                :label-width="formLabelWidth2"
              >
                <el-select v-model="orderParameter.hospitalDrugId" filterable style="width: 160px" placeholder="请选择" @change="queryPrice">
                  <el-option v-for="(item,index) in outpatientHospital" :key="index" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>

              <el-form-item v-if="orderParameter.type==='3'" label="配药途径" :label-width="formLabelWidth2">
                <el-select v-model="orderParameter.typeDrug" filterable style="width: 160px" placeholder="请选择" @change="typeChange">
                  <el-option label="医院配药" value="1" />
                  <el-option label="药店配药" value="2" />
                </el-select>
              </el-form-item>

            </transition>
            <transition name="el-zoom-in-top">
              <!-- 医院列表 -->
              <el-form-item
                v-if="orderParameter.type==='3' &&orderParameter.typeDrug==='1'"
                label="医院列表"
                :label-width="formLabelWidth2"
              >
                <el-select v-model="orderParameter.hospitalDrugId" filterable style="width: 160px" placeholder="请选择" @change="queryPrice">
                  <el-option v-for="(item,index) in medicineHospital" :key="index" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
              <!--            药店列表-->
              <el-form-item
                v-if="orderParameter.type==='3' && orderParameter.typeDrug==='2'"
                label="药店列表"
                :label-width="formLabelWidth2"
              >
                <el-select v-model="orderParameter.hospitalDrugId" filterable style="width: 160px" placeholder="请选择" @change="queryPrice">
                  <el-option v-for="(item,index) in medicineHospital2" :key="index" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </transition>

          </div>
          <div class="box">
            <el-form-item label="陪诊人员" :label-width="formLabelWidth">
              <el-button v-if="orderParameter.accompanyId" type="info" size="mini" plain @click="chooseEmployee">{{ orderParameter.accompanyName }}</el-button>
              <el-button v-else type="info" size="mini" plain @click="chooseEmployee">选择陪诊人员</el-button>
            </el-form-item>
            <transition name="el-zoom-in-top">
              <el-form-item v-if="orderParameter.type ==='3'" label="所患病疾" :label-width="formLabelWidth">
                <el-input
                  v-model="orderParameter.disease"
                  placeholder="请输入当前疾病"
                  style="width: 180px"
                  autocomplete="off"
                />
              </el-form-item>
            </transition>
            <transition name="el-zoom-in-top">
              <el-form-item v-if="orderParameter.type==='3'" label="目前症状" :label-width="formLabelWidth">
                <el-input
                  v-model="orderParameter.symptom"
                  placeholder="请输入当前症状"
                  style="width: 180px"
                  autocomplete="off"
                />
              </el-form-item>
            </transition>
          </div>

          <div class="box">
            <el-form-item label="出行方式" :label-width="formLabelWidth2">
              <el-select v-model="orderParameter.tripType" style="width: 160px" placeholder="请选择">
                <el-option label="公交" value="1" />
                <el-option label="网约车" value="2" />
                <el-option label="步行" value="3" />
                <el-option label="非急救转运" value="4" />
                <el-option label="出租车" value="5" />
              </el-select>
            </el-form-item>
            <el-form-item label="出发时间" :label-width="formLabelWidth2">
              <el-date-picker
                v-model="orderParameter.startTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期时间"
              />
            </el-form-item>
          </div>

          <div class="box" />
          <div class="box map">
            <div style="margin: 12px 14px 0px 30px;font-weight: bold;height: 300px"> 服务地址</div>
            <amps ref="child" :movies="movies" @childFn="parentFn" />

          </div>
          <div class="box">
            <el-form-item label="详细地址" :label-width="formLabelWidth">
              <el-input
                v-model="orderParameter.symptom"
                placeholder="请输入用户详细地址 例如：门牌号"
                style="width:500px"
                autocomplete="off"
              />
            </el-form-item>
          </div>
          <div class="box">
            <el-form-item label="基础价格" :label-width="formLabelWidth">
              {{ orderPrice.estimate }}

            </el-form-item>
            <el-form-item label="超出费用" :label-width="formLabelWidth">
              {{ orderPrice.overBudget }}

            </el-form-item>
            <el-form-item label="合计费用" :label-width="formLabelWidth">
              {{ orderPrice.estimate+orderPrice.overBudget }}

            </el-form-item>
          </div>

        </el-form>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="createOrder">提交订单</el-button>
      </div>

    </el-dialog>
    <!-- 选择陪诊 弹窗-->
    <el-drawer
      title="选择陪诊人员"
      size="50%"
      :visible.sync="drawer"
      direction="rtl"
    >
      <el-table
        height="85vh"
        :data="accompanyList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          label="姓名"
          width="100px"
          prop="name"
        />
        <el-table-column
          align="center"
          label="地址"
          prop="address"
        />
        <el-table-column
          align="center"
          label="电话"
          width="120px"
          prop="phone"
        />
        <el-table-column
          align="center"
          label="距离"
          width="80px"
          prop="distance"
        />
        <el-table-column
          align="center"
          label="评分"
          width="120px"
          prop="grade"
        >
          <template slot-scope="scope">
            <el-rate
              v-model="scope.row.grade"
              disabled
              show-score
              text-color="#ff9900"
              score-template="scope.row.rate"
            />
          </template>
        </el-table-column>
        <el-table-column
          width="120px"
          align="center"
        >
          <template slot="header">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"
            />
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="chooseUser(scope.row)"
            >选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>

    <!-- 分页-->
    <el-pagination
      background
      :current-page="relationList.pageNum"
      :page-sizes="[10, 50, 100, 200]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="relationList.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @prev-click="handlePrevClick"
      @next-click="handleNextClick"
    />
  </div>

</template>

<script>
import amps from '@/components/Map/amps'
import { getRelation, listRelationPage, saveRelation, updateRelation, uploadExcel } from '@/api/patient'
import { createOrder, estimateOrderMoney } from '@/api/order'
import { listAccompanyPage } from '@/api/accompany'
import { listHospitalPage } from '@/api/hospital'
import store from '@/store/index'

export default {
  name: 'Relation',
  components: {
    amps
  },
  data() {
    return {
      object: {
        token: store.getters.token
      },
      fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }], // 查询下的=》用来源
      options: [{
        value: 2,
        label: '残联'
      }, {
        value: 3,
        label: '卫健委'
      }, {
        value: 5,
        label: '自费用户'
      }],
      relation: {},
      relationParameter: {},
      relationInfo: [{
        name: '哈哈哈',
        sex: '男',
        age: '68',
        phone: '18955555555',
        idCard: '342225195402082222',
        useNumber: '1',
        freeNumber: '1',
        source: '残联',
        status: '正常',
        createTime: '2021-10-21 10:20:00'
      }],
      relationList: [

      ],
      relationListPop: [

      ],
      pageNum: 1,
      pageSize: 10,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      formLabelWidth: '100px',
      formLabelWidth2: '100px',
      popType: '',
      visible: false,
      orderParameter: {
        accompanyName: '',
        hospitalDrugId: ''
      },
      postForm: {
        detailedAddress: '',
        longitude: '',
        latitude: ''
      },
      movies: {},
      drawer: false,
      search: '',
      accompanyList: [],
      outpatientHospital: [], // 门诊医院
      medicineHospital: [], // 配药医院
      medicineHospital2: [], // 配药医院
      orderPrice: {} // 配药医院
    }
  },
  created() {
    this.listRelationPage()
  },
  methods: {
    handleSuccess(file) {
      this.listRelationPage()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },

    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    uploadExcel(file) {
      uploadExcel({
        file: file
      }).then(res => {

      })
    },
    // 子组件传值
    parentFn(payload) {
      this.orderParameter.startLatitude = payload.lat
      this.orderParameter.startLongitude = payload.lng
      this.orderParameter.startAddress = payload.address
      this.estimateOrderMoney()
    },
    queryPrice() {
      this.estimateOrderMoney()
    },
    // 计算价格
    estimateOrderMoney() {
      this.orderParameter.patientId = this.relationListPop[0].id
      if (this.orderParameter.startLongitude !== undefined) {
        estimateOrderMoney(this.orderParameter).then(res => {
          this.orderPrice = res.dataMap
        })
      }
    },

    chooseUser(user) {
      this.orderParameter.accompanyName = user.name
      this.orderParameter.accompanyId = user.accompanyId

      this.drawer = false
    },
    listAccompanyPage() {
      listAccompanyPage({
        status: 0
      }, 1, 9999).then(res => {
        this.accompanyList = res.dataMap.list
      })
    },
    createOrder() {
      this.orderParameter.patientId = this.relationListPop[0].id
      createOrder(this.orderParameter).then(res => {
        if (res.success) {
          this.$message({
            message: '下单成功',
            type: 'success'
          })
          this.dialogFormVisible2 = false
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    updateRelation() {
      updateRelation(this.relation).then(res => {
        if (res.success) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.dialogFormVisible = false
          this.listRelationPage()
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    // 陪诊人员弹窗
    chooseEmployee() {
      this.drawer = true
      this.listAccompanyPage()
    },
    getPosition({ address, lat, lng, name }) {
      this.postForm.detailedAddress = address
      this.postForm.longitude = String(lng)
      this.postForm.latitude = String(lat)
    },
    typeChange(val) {
      this.medicineHospital = []
      this.medicineHospital2 = []
      this.orderParameter.hospitalDrugId = ''
      if (val === '1') {
        listHospitalPage({
          type: 1
        }, 1, 9999).then(res => {
          this.medicineHospital = res.dataMap.list
        })
      } else {
        listHospitalPage({
          type: 2
        }, 1, 9999).then(res => {
          this.medicineHospital2 = res.dataMap.list
        })
      }
    },
    // 选择服务类型触发事件
    serverChange(val) {
      this.orderParameter.hospitalDrugId = ''
      if (val === '1' || val === '2') {
        listHospitalPage({
          type: 1
        }, 1, 9999).then(res => {
          this.outpatientHospital = res.dataMap.list
        })
      }
    },
    // 发起订单弹窗
    handleOrder(id) {
      this.dialogFormVisible2 = true
      // 查询用户信息
      this.getRelation(id)
    },
    // 删除人员信息
    del() {
      this.$confirm('此操作将删除所选人员信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

      }).catch(() => {

      })
    },
    // 添加/修改弹窗
    handleAddUpd(type, id) {
      if (type === 1) {
        // 添加
        this.dialogFormVisible = true
        this.popType = type
      } else if (type === 2) {
        // 修改
        this.dialogFormVisible = true
        this.popType = type
        this.getRelation(id)
      }
    },
    // 勾选的信息
    handleSelectionChange(val) {
      console.log(val)
    },
    // 搜索
    handleSearch() {
      this.listRelationPage()
    },
    getRelation(id) {
      getRelation({
        id: id
      }).then(res => {
        this.relation = res.dataMap
        this.relationListPop = []
        this.relationListPop.push(this.relation)
      })
    },
    saveRelation() {
      saveRelation(this.relation).then(res => {
        if (res.success) {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.dialogFormVisible = false
          this.listRelationPage()
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    listRelationPage() {
      listRelationPage(this.relationParameter, this.pageNum, this.pageSize).then(res => {
        this.relationList = res.dataMap
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.pageNum = val

      console.log(`当前页: ${val}`)
    },
    handlePrevClick() {
      this.pageNum--
    },
    handleNextClick() {
      this.pageNum++
    }

  }
}
</script>

<style lang="scss" scoped>
.employee-form {
  max-height: 90vh;
  padding-bottom: 10px;
  overflow: auto;
}
.map{
  height: 400px;
}
.search-box-wrapper{
  width: 100px!important;
}

.schedule-form {
  max-height: 650px;
  padding-bottom: 10px;
  overflow: auto;
}

.orderInfo {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  margin: 25px;
}

.base-input {
  width: 200px;

}

.el-select .el-input {
  width: 110px;
}

.el-dialog__body {
  padding: 30px 40px;
}

.app-container {
  margin-top: 10px;
}

.el-pagination {
  float: right;
  margin: 10px 30px;
}

.el-table {
  margin: 10px 0px;
}
</style>
